<template>
   <div class="">
        <div class="header">
               <img src="@/assets/header-bg.jpg" alt="">
               <search class="search-area" @showTab="showTab"></search>
                <div class="tab-list" v-show="isShowTab">
                  <div class="tab-list-item">专业平台</div>
                  <div class="tab-list-item">供求金链</div>
                  <div class="tab-list-item">联系我们</div>
               </div>
               <div class="text-header">
                   <p class="p1">CREATE THE INTERCONNECTION OF COATING INDUSTRY</p>
                   <p class="p2">金色摇篮</p>
                   <p class="p3">全面构架涂料产业智联互通</p>
               </div>
        </div>
   </div>
</template>

<script>
import search from './search'
export default {
   name:'topArea',
   data() {
       return {
         isShowTab:false
       }
   },
  components: {search},
  methods:{
    showTab(){
     this.isShowTab = !this.isShowTab;
    }
  }
}
</script>

<style scoped lang="less">
.header{
     img{
        width: 7.5rem;
        height: 4rem;
        position: relative;
     }
 }
  .search-area{
      position: absolute;
      top: 0.36rem;
      right: 0.25rem;
  }
  .text-header{
       position: absolute;
       top: 1.7rem;
       left:0.83rem;
       font-size: 0.14rem;
    .p1{
      width: 5rem;
      color:#DCAE63; 
    }
    .p2,.p3{
        font-weight: 700;
        color: #FFFFFA;
    }
  }
  .tab-list{
    background-color:#161b33;
    opacity: 0.8;
    width: 1.92rem;
    height: 2.25rem;
    position: absolute;
    right: 0;
    top: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    .tab-list-item{
      text-align: center;
      
       width: 1.92rem;
        color: #cca53f;
        font-size: 0.24rem;
        transform: scale(3/4);
    }
}
  
</style>
